<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>自定义文件上传</title>

  <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
  <script src="./ckeditor.js"></script>
  <script src="./translations/zh-cn.js"></script>
  <script>
    function UploadAdapter(loader) {
      this.loader = loader;
    }

    UploadAdapter.prototype.upload = function () {
      var thisLoader = this.loader;
      return new Promise(function (resolve, reject) {
        var data = new FormData();
        data.append('upload', thisLoader.file);
        data.append('allowSize', 10); //允许图片上传的大小/兆
        $.ajax({
          url: '/file/ckedit/upload',
          type: 'POST',
          data: data,
          dataType: 'json',
          processData: false,
          contentType: false,
          success: function (data) {
            if (data.uploaded) {
              resolve({default: data.url});
            } else {
              reject(data.error.message);
            }
          }
        });
      });
    };

    UploadAdapter.prototype.abort = function () {

    };

    var editor;

    function load() {
      ClassicEditor.create(document.querySelector('#editor'), {
        toolbar: ['bold', 'italic', 'imageUpload', 'link', '|', 'undo', 'redo'],
        language: 'zh-cn'
      }).then(function (e) {
        editor = e;
        editor.plugins.get('FileRepository').createUploadAdapter = function (loader) {
          return new UploadAdapter(loader);
        };
      }).catch(function (e) {
        console.error(e);
      });
    }

    function getData() {
      var textString = editor.getData();
      console.log(textString);
    }

    function clearData() {
      editor.setData('');
    }
  </script>
</head>
<body onload="load()">
<textarea name="content" id="editor"></textarea>
<div>
  <button onclick="getData()">获取富文本框的数据</button>
  <button onclick="clearData()">清空富文本框的数据</button>
</div>
</body>
</html>